<template>

  <view  class="user-income">
    <view class="income-header">

    </view>
    <view class="income-title">
         <text>收益数据</text>
         <text  @click="toChangeRecord"  class="his">   <fui-icon size="28" name="aftersale"></fui-icon>  变动记录</text>
    </view>

    <view class="income-body">
        <view class="income-content">
            <view class="title">可提现</view>
            <view>{{ solid}}</view>
        </view>

        <view  class="income-content">
            <view class="title">总收益</view>
            <view>{{ count}}</view>
        </view>
    </view>

    <view class="income-info">

        <view>
            <view>{{toIncome}}</view>
            <view>今日预估</view>
        </view>
        <view>
            <view>{{toYeIncome}}</view>
            <view>昨日收益</view>
        </view>
        <view  @click="toMoney" class="my-money">
           <fui-icon size="34" name="coupon"></fui-icon>   <text>我的钱包</text>
        </view>
    </view>
  </view>
</template>

<script setup lang="ts">

import dyUserPlayingService from "@/api/dyUserPlayingService";
const countData = ref({
    solid:0,
    count:0,
    toIncome:0,
    toYeIncome:0,
})
const solid = computed(()=>{
    return  countData.value.solid ?  (countData.value.solid / 100).toFixed(2) : '0.00'
})
const count = computed(()=>{
    return countData.value.count ?  (countData.value.count / 100).toFixed(2) : '0.00'
})
const toIncome =computed(()=>{
    return  countData.value.toIncome ?  (countData.value.toIncome / 100).toFixed(2) : 0
})
const toYeIncome = computed(()=>{
    return   countData.value.toYeIncome ?  (countData.value.toYeIncome / 100).toFixed(2) : 0
})
onMounted( async()=>{
   const {success,result}  = await dyUserPlayingService.getUserCount()
    if(success){
        countData.value  = result
    }
})
const toChangeRecord = ()=>{
    uni.navigateTo({
        url:"/subPackages_user/changeRecord/changeRecord"
    })
}
const toMoney = ()=>{
    uni.navigateTo({
        url:"/subPackages_user/money/money"
    })
}

</script>

<style lang="scss" scoped>
.user-income{
    background: white;
    margin: 28rpx;
    // padding: 20rpx;
    border-radius: 18rpx;
    position: relative;
    z-index: 10;
    .income-header{
        height: 70rpx;
        background-image: url("https://p0.ssl.img.360kuai.com/t0167a231e9662267ee.png");
        background-size: 100% 100%;
        
    }
    .income-title{
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        font-weight: bolder;
        padding: 10rpx 30rpx;
        .his{
            font-size: 23rpx;
            padding: 5rpx 25rpx;
            background: rgb(241,240,255);
            border-radius: 28rpx;
            
            color: #a56bf1;
        }
    }
    .income-body{
        display: flex;
        justify-content: space-between;
        padding: 10rpx 30rpx;
        .income-content{
            width: 282rpx;
            height: 150rpx;
            background: #5d129b;
            // background: linear-gradient(to right, rgb(113,95,228), rgb(192, 240, 254));
            background-image: url("https://p3.toutiaoimg.com/origin/pgc-image/98bd2f689d514183ae8511befe2171b8");
            background-size: 100% 100%;       
            border-radius: 8rpx;
            color: white;
            view{
                margin: 20rpx;
                font-size: 45rpx;
            }
            .title{
                font-size: 23rpx;
            }
        }
    }
    .income-info{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        view{
            text-align: center;
            font-size: 30rpx;
        }
        .my-money{
            font-size: 24rpx;
            padding: 10rpx 25rpx;
            padding-left: 10rpx;
            color: white;
            background-color: rgb(130,114,237);
            border-radius: 280rpx;
            display: flex;
            text{
                margin-left: 8rpx;
            }
        }
    }   
}

</style>
